<template>
	<view class="uni_box home">
		<navbar title='能力评估' :yin="true">
		</navbar>
		<view class="content">
			<view class="nlone">
				<text class="genju">根据您最近7天的答题情况生成</text>
				<view class="zonglv">
					<view class="jdu">
						<u-line-progress active-color="#FD864F" height="15" :striped="true" :striped-active="true"
							inactive-color="#EEEEEE" :percent="70"></u-line-progress>
					</view>
					<text class="zongliang">总题量:597</text>
				</view>
				<view class="datiview">
					<view class="daitem">
						<text class="daleft">答题量: <text class="daval">524题</text></text>
					</view>
					<view class="daitem">
						<text class="daleft">目前答题量: <text class="daval">524题</text></text>
					</view>
					<view class="daitem">
						<text class="daleft">正确率: <text class="daval">51%</text></text>
					</view>
				</view>
			</view>
			<view class="boruo">
				<text class="boname">薄弱知识点（TOP5）</text>
				<view class="zque">
					<text class="zqueview"></text>
					<text class="zqname">正确率</text>
				</view>
				<view class="qview">
					<!-- 创建一个canvas元素作为容器 -->
					<view style="width:100%; height:550rpx"><l-echart ref="chartRef" @finished="init"></l-echart></view>
					<!-- <canvas id="chart" canvas-id="barChart"></canvas> -->
				</view>

				<text class="boname">相关推荐</text>
				<view class="tuilist">
					<view class="tuiitem" v-for="(item, index) in 10" :key="index">
						<text class="quan"></text>
						<text class="name txt">(2020) Reading 2 Ethics and Trust in(2020) Reading 2 Ethics and Trust
							</text>
						<view class="gong">巩固练习</view>
					</view>
				</view>
			</view>
		</view>
</view>
</template>

<script>
//    import * as echarts from 'echarts'
import * as echarts from '@/uni_modules/lime-echart/static/echarts.min'
export default {
	data() {
		return {
		}
	},
	onLoad() {

	},
	mounted() {
		this.initBarChart(); // 初始化横向柱状图
	},
	onShow() {
	},
	methods: {
		async initBarChart() {
			// const chartDom = document.getElementById('chart'); // 获取canvas元素
			// const myChart = this.$echarts.init(chartDom); // 初始化echarts实例

			// 配置数据及样式
			const option = {
				title: {
					// text: 'World Population'
				},
				tooltip: {
					trigger: 'axis',
					axisPointer: {
						type: 'shadow'
					}
				},
				legend: {},
				grid: {
					left: '0%',
					right: '4%',
					bottom: '10%',
					top:'-2%',
					containLabel: true
				},
				xAxis: {
					type: 'value',
					boundaryGap: [0, 0.01],
					axisLabel: {
						formatter: function(value) {
							return value + '%';
						}
					},
				},
				yAxis: {
					type: 'category',
					data: ['R1', 'R2', 'R3', 'R4', 'R5'],
					axisTick: {  
						show: false,
						lineStyle:{
							color:'#ff6d00' //设置刻度线颜色为红色
						},
						textStyle: {
							color: '#ff6d00'
						}
					},
					nameTextStyle: {
					//y轴上方单位的颜色
					color: "#fff",
					},
					axisLabel: {
					//y轴文字的配置
					textStyle: {
						color: "#666666",
						margin: 15,
					},
					// formatter: '{value} %'//y轴的每一个刻度值后面加上‘%’号
					},
					axisTick: {
					show: false,
					},
					axisLine: {
					//y轴线的颜色以及宽度
					show: false,
					lineStyle: {
						color: "#EEEEEE",
						width: 0.5,
						type: "solid",
					},
					},
					splitLine: {
					//分割线配置
					show: false,
					lineStyle: {
						color: "#EEEEEE",
					},
					},
					
					
				},
				splitLine: {
				//分割线配置
				show: false,
				lineStyle: {
					color: "#ff6d00",
				},
				},
				// label: {
				// 	show: true,   // 显示标签
					
				// 	textStyle: {
				// 		color: '#ff0000'   // 设置文本颜色为红色
				// 	},
				// 	axisLabel: {
				// 		formatter: function(value) {
				// 			return value + '%';
				// 		}
				// 	},
				// },
				series: [
					{
						name: '',
						type: 'bar',//horizontalBar
						color:'#FD864F',
						data: [10, 20, 30, 40, 50],
						itemStyle: {
							color: function(params) {
								return '#FD864F'; // 根据索引返回对应位置的颜色
							}
						},
						barWidth: 14, // 柱子宽度
					}
					// {
					// 	name: '2012',
					// 	type: 'bar',
					// 	data: [19325, 23438, 31000, 121594, 134141, 681807]
					// }
				]
			};

			// 使用配置项生成图表
			// myChart.setOption(option);
			const chart = await this.$refs.chartRef.init(echarts);
            chart.setOption(option)
		}
	}
}
</script>

<style lang="scss" scoped>
page {
	background-color: #fff;
}

#chart {
	width: 400px;
	/* 设置画布大小 */
	height: 300px;
}

.content {
	background-color: #fff;
	padding: 50rpx 30rpx;

	.nlone {
		display: flex;
		flex-direction: column;

		.genju {
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #333333;
		}

		.zonglv {
			display: flex;
			flex-direction: row;
			align-items: center;
			margin: 40rpx 0;

			.jdu {
				flex: 1;

			}

			.zongliang {
				margin-left: 30rpx;
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 24rpx;
				color: #666666;
			}
		}

		.datiview {
			display: flex;
			flex-direction: row;
			align-items: center;

			.daitem {
				flex: 1;
				display: flex;
				flex-direction: row;
				align-items: center;
				border-right: 1rpx solid #eee;
				justify-content: center;

				.daleft {
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 24rpx;
					color: #666666;

					.daval {
						display: inline-block;
						margin-left: 6rpx;
						color: rgba(253, 134, 79, 1);
					}
				}
			}

			.daitem:last-child {
				border-right: none;
			}
		}
	}

	.boruo {
		margin: 50rpx 0 60rpx;

		.boname {
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #272C31;
		}

		.zque {
			display: flex;
			flex-direction: row;
			align-items: center;
			margin: 30rpx 0;

			.zqueview {
				display: inline-block;
				width: 20rpx;
				height: 14rpx;
				background: #FD864F;
				margin-right: 14rpx;
			}

			.zqname {
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 24rpx;
				color: #666666;
			}
		}
	}

	.tuilist {
		.tuiitem {
			display: flex;
			flex-direction: row;
			align-items: center;
			padding: 20rpx 0;
			border-bottom: 1rpx solid #eee;

			.quan {
				width: 5rpx;
				height: 5rpx;
				background: #FD864F;
				border-radius: 50%;
				display: inline-block;
				margin-right: 18rpx;
			}

			.name {
				max-width: 75%;
				display: inline-block;
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 26rpx;
				color: #666666;
			}

			.gong {
				margin-left: auto;
				width: 126rpx;
				height: 42rpx;
				background: linear-gradient(-90deg, #FA4E4E, #FD894F);
				border-radius: 5rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 24rpx;
				color: #FFFFFF;
			}

		}
	}

	// padding-bottom: 150rpx;
}</style>
